import BScroll from 'better-scroll';
import Loading from './loading';

export default {
  name: 'co-scroll',
  props: {
    data: { // data 监测数据变化刷新scroll
    },
    options: { // better-scroll options
      type: Object,
      default: () => ({})
    },
    pullHeight: {
      type: Number,
      default: 45
    },
    pullDownRefresh: Boolean, // 是否开启下拉刷新
    pullUpLoad: Boolean, // 是否开启上拉加载
    noMore: Boolean,
    refreshDelay: {
      type: Number,
      default: 20
    }
  },
  data () {
    return {
      refreshing: false,
      loading: false,
      pullDownStyle: ''
    };
  },
  mounted () {
    this.$nextTick(() => this.initScroller());
  },
  methods: {
    initScroller () {
      if (!this.$el) return;
      this.scroller = new BScroll(this.$el, {
        click: true,
        pullDownRefresh: this.pullDownRefresh ? {
          threshold: 70,
          stop: 45
        } : false,
        pullUpLoad: this.pullUpLoad ? {
          threshold: 10
        } : false,
        ...this.options
      });
      this._calculateMinHeight();
      this.scroller.on('scroll', (pos) => {
        this.pullDownStyle = `top:${pos.y - this.pullHeight}px`;
        this.$emit('scroll', pos);
      });
      if (this.pullDownRefresh) {
        this.scroller.on('pullingDown', () => {
          this.refreshing = true;
          this.$emit('refresh', this);
        });
      }
      if (this.pullUpLoad) {
        this.scroller.on('pullingUp', () => {
          this.loading = true;
          this.$emit('load', this);
        });
      }
    },
    finishLoad () {
      this.loading = false;
      this.scroller && this.scroller.finishPullUp();
    },
    finishRefresh () {
      this.refreshing = false;
      this.scroller && this.scroller.finishPullDown();
    },
    disable() {
      // 代理better-scroll的disable方法
      this.scroller && this.scroller.disable();
    },
    enable() {
      // 代理better-scroll的enable方法
      this.scroller && this.scroller.enable();
    },
    refresh() {
      this._calculateMinHeight();
      this.scroller && this.scroller.refresh();
    },
    scrollTo() {
      // 代理better-scroll的scrollTo方法
      this.scroller && this.scroller.scrollTo.apply(this.scroller, arguments);
    },
    scrollToElement() {
      // 代理better-scroll的scrollToElement方法
      this.scroller && this.scroller.scrollToElement.apply(this.scroller, arguments);
    },
    // eslint-disable-next-line no-unused-vars
    createPullDown (h) {
      if (!this.pullDownRefresh) return;
      return (
        <div class="co-pulldown-wrapper" style={this.pullDownStyle}>
          <Loading loading={this.refreshing}/>
        </div>
      );
    },
    // eslint-disable-next-line no-unused-vars
    createPullUp (h) {
      if (!this.pullUpLoad) return;
      return (
        <div class="co-pullup-wrapper" style={this.noMore ? 'display:none' : ''}>
          <Loading loading={this.loading} />
        </div>
      );
    },
    _calculateMinHeight () {
      if (this.$refs.inner) {
        const el = this.$el;
        this.$refs.inner.style.minHeight = this.pullDownRefresh || this.pullUpLoad ? `${el.offsetHeight + 1}px` : 0;
      }
    }
  },
  render (h) {
    return h('div', {
      staticClass: 'co-scroll-wrapper'
    }, [
      h('div', {
        staticClass: 'co-scroll-content'
      }, [
        h('div', {
          staticClass: 'co-scroll-content__inner',
          ref: 'inner'
        }, this.$slots.default),
        this.createPullUp(h)
      ]),
      this.createPullDown(h)
    ]);
  },
  beforeDestroy () {
    this.scroller && this.scroller.destroy();
  },
  watch: {
    data () {
      setTimeout(() => {
        this.refresh();
      }, this.refreshDelay);
    }
  }
};
